<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-autocomplete
          v-model="cityname"
          :fetch-suggestions="querySearchAsync"
          :trigger-on-focus="false"
          :highlight-first-item="true"
          placeholder="请输入内容"
          @select="handleSelect"
        ></el-autocomplete>
      </el-col>
      <el-col :span="9" style="margin-left:10px">
        <el-date-picker
          v-model="xianshi"
          @change="dateChange"
          :value="xianshi"
          :clearable="false"
          type="daterange"
          range-separator="-"
          start-placeholder="入店日期"
          end-placeholder="离店日期"
        ></el-date-picker>
      </el-col>
      <el-col :span="6">
        <div class="block">
          <el-cascader :options="option"></el-cascader>
        </div>
      </el-col>

      <el-col :span="3" style="margin-left:8px">
        <el-button type="primary" @click="submitHandle">查看价格</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      value: [],
      option: [
        {
          value: "zhinan",
          label: "成人",
          children: [
            {
              value: "1",
              label: "1"
            },
            {
              value: "2",
              label: "2"
            },
            {
              value: "3",
              label: "3"
            },
            {
              value: "4",
              label: "4"
            },
            {
              value: "5",
              label: "5"
            },
            {
              value: "6",
              label: "6"
            },
            {
              value: "7",
              label: "7"
            },
            {
              value: "8",
              label: "8"
            },
            {
              value: "9",
              label: "9"
            }
          ]
        }
      ],
      restaurants: [],
      options: {},
      model: {
        city: 197
      },
      cityname: "",
      person: null,
      xianshi: [this.$route.meta.leftTime, this.$route.meta.enterTime]
    };
  },
  methods: {
    loadAll(cityC) {
      return this.$axios({
        url: "/cities",
        params: {
          name: cityC
        }
      }).then(res => {
        const { data } = res.data;
        const suggestions = data.map(element => {
          return {
            value: element.name.replace(/市$/, ""),
            code: element.sort,
            id: element.id
          };
        });
        return suggestions.filter(ele => {
          return ele.code;
        });
      });
    },
    submitHandle() {
      this.$store
        .dispatch("hotel_filter/FILTER_DATA_TOP", { ...this.model })
        .then(res => {
          this.$route.meta.cityname = this.cityname;
          this.$route.meta.leftTime = this.xianshi[0];
          this.$route.meta.enterTime = this.xianshi[1];
          this.$emit("seacthList", res.data);
        });
    },
    async querySearchAsync(queryString, cb) {
      const res = await this.loadAll(queryString);
      if (res.length > 0) {
        this.model.city = res[0].id;
        cb(res);
      } else {
        cb([
          {
            value: "不支持该城市"
          }
        ]);
      }
    },
    handleSelect(item) {
      if(item.value==this.$route.query.city) return
      this.model.city = item.id;
      console.log(this.model.city);
      this.$emit("changeCityId", this.model.city);
      this.$router.push({
        path: "/hotel?city=" + item.value
      });
    },
    //日期
    dateChange(date) {
      this.model.leftTime = moment(date[0]).format("YYYY-MM-DD");
      this.model.enterTime = moment(date[1]).format("YYYY-MM-DD");
      this.xianshi[0] = this.model.leftTime;
      this.xianshi[1] = this.model.enterTime;
    }
  },
  mounted() {
    this.$axios({
      url: "/cities",
      params: {
        name: "广州"
      }
    }).then(res => {
      console.log(res);
    });

    this.cityname = this.$route.meta.cityname;
    this.xianshi[0] = this.$route.meta.leftTime;
    this.xianshi[1] = this.$route.meta.enterTime;
  }
};
</script>

<style>
</style>